<template>
  <div>
    <img
      style="width: 30px"
      @click="click"
      :src="isFullscreen ? img[1] : img[0]"
    />
  </div>
</template>

<script>
import screenfull from "screenfull";

export default {
  data() {
    return {
      // 是否全屏
      isFullscreen: false,
      img: [
        require("@/static/img/index/full-screen.svg"),
        require("@/static/img/index/back_full.svg"),
      ],
    };
  },
  mounted() {
    // 挂载后执行初始化的函数
    this.init();
  },
  beforeUnmount() {
    // 销毁前执行销毁的函数
    this.destroy();
  },
  methods: {
    click() {
      // 无法全屏时
      if (!screenfull.enabled) {
        ElMessage.warning("你的浏览器无法全屏");
        return false;
      }
      //   改变全屏状态
      screenfull.toggle();
    },
    change() {
      // 修改页面全屏参数
      this.isFullscreen = screenfull.isFullscreen;
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on("change", this.change);
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off("change", this.change);
      }
    },
  },
};
</script>

<style scoped></style>
